<template>
  <div class="addButton">
    <i @click='dialogFormVisibleAdd = true' class="iconfont icon-bianji1"></i>
    <!--<el-button type="text" size="mini" @click="dialogFormVisibleAdd = true">编辑</el-button>-->
    <el-dialog :close-on-click-modal="false" @opened="$store.commit('dialogTop')" :append-to-body="true" title="编辑" :visible.sync="dialogFormVisibleAdd" @close="resetForm('ruleFormAdd')" @open="dialogOpen">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="userName" :rules="[{ 'required':true, 'message': '姓名不能为空', }]">
          <el-input size="small" :maxlength="20" v-model="ruleFormAdd.userName"  auto-complete="off"  placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile" required>
          <el-input size="small" :maxlength="20" v-model="ruleFormAdd.mobile" auto-complete="off"  placeholder="手机号码"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属单位" prop="agencyId" :rules="[{ 'required':true, 'message': '请选择单位', }]">
          <el-select :disabled="$store.state.agencyId" style="width: 100%;" v-model="ruleFormAdd.agencyId" size="small" clearable placeholder="用户角色">
            <el-option
              v-for="item in $store.state.govAgencyList"
              :key="item.agencyId"
              :label="item.agencyName"
              :value="item.agencyId">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="用户状态" prop="userStatus" :rules="[{ 'required':true, 'message': '请选择用户状态', }]">
          <el-radio v-model="ruleFormAdd.userStatus" label="0">启用</el-radio>
          <el-radio v-model="ruleFormAdd.userStatus" label="1">停用</el-radio>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin: 21px 0 13px 0 ;">
        <el-button size="mini" @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="submitForm('ruleFormAdd')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    props: ["editInfo"],
    data () {
      var phoneCheck = (rule, value, callback) => {
        var phnum = /^1[3456789]{1}\d{9}$/
        if (value === '') {
          callback(new Error('手机号码不能为空'));
        } else if (!phnum.exec(Number(value))) {
          callback(new Error('请正确输入手机号！'));
        } else {
          callback();
        }
      };
      var mailCheck = (rule, value, callback) => {
        var isMail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
        if (value === '') {
          callback(new Error('邮箱不能为空'));
        } else if (!isMail.exec(value)) {
          callback(new Error('请正确输入邮箱地址！'));
        } else {
          callback();
        }
      };

      var passwordCheck = (rule, value, callback) => {
        var pwd = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%\^&*?]{8,}$/;
        if (!value) {
          return callback(new Error('请输入密码'));
        } else if (!pwd.exec(value)) {
          callback(new Error('密码至少8位数并包含数字和字母'));
        } else {
          callback();
        }
      };
      var passwordsureCheck = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('确认密码不能为空'));
        } else if (!(this.ruleFormAdd.loginPassword === value)) {
          callback(new Error('两次密码输入不一致'));
        } else {
          callback();
        }
      };
      return {
        ruleFormAdd: {
          "userId": "",
          "mobile": "",
          "userName": "",
          "userStatus": "0",
          "agencyId":this.$store.state.agencyId
        },
        dialogFormVisibleAdd: false,
        streetData: [],
        rulesAdd: {
          mobile: [
            {required: true,  validator: phoneCheck,}
          ],
          email: [
            {required: true,  validator: mailCheck, }
          ],
          loginPassword: [
            {required: true,  validator: passwordCheck,}
          ],
          passwordSure: [
            {required: true, validator: passwordsureCheck, }
          ]
        }
      }
    },
    created(){

    },
    components: {},
    methods: {

      dialogOpen(){
        for(let i in this.ruleFormAdd){
          this.ruleFormAdd[i]=this.editInfo[i]
        }
        this.ruleFormAdd.passwordSure=this.ruleFormAdd.loginPassword
        this.ruleFormAdd.userStatus=this.ruleFormAdd.userStatus+""
      },
      //提交回调
      handleDiaSureAdd(){
        this.axios.post(process.env.API_HOST + '/system/updateGovUser',this.ruleFormAdd)
          .then(response => {
            if (response.data.code == 200) {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
              this.dialogFormVisibleAdd = false
              this.$emit('searchRowsInfo')
            }

          })
          .catch(error => {
            console.log(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSureAdd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .addButton
    display inline-block



</style>
